<template>
  <div>
    <div>【大区异常处理】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
 
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, watch } from "vue";
import * as echarts from "echarts";
import type {
  EChartsOption,
  EChartsType,
  PieSeriesOption,
} from "echarts"; // 导入类型
import type { Abnormals, Abnormal } from "@/api/types";

const props = defineProps<{
  data: Abnormals;
}>();
console.log("环形图", props.data);

//1. 根据DOM 实例，通过echarts.init方法，生成echarts实例
const target = ref<HTMLElement | null>(null);
let mChart: EChartsType;
onMounted(() => {
  mChart = echarts.init(target.value as HTMLElement);
  renderChart();
});

const getSeriesData = () => {
  const series: PieSeriesOption[] = [];
  props.data.abnormals.forEach((item, index) => {
    //上层
    series.push({
      name: item.name,
      type: "pie",
      clockwise: false,
      // hoverAnimation: false,
      emphasis: {
        scale: false
      },
      radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
      center: ["55%", "55%"],
      label: {
        show: false,
      },
      data: [
        {
          value: item.value,
          name: item.name,
        },
        {
          value: 1000,
          itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
        },
      ],
    });

    //底层

    series.push({
      name: item.name,
      type: "pie",
      silent: true,
      z: 1,
      clockwise : false, //逆时针
      // hoverAnimation: false, 用下面的替代
      emphasis: {
        scale: false
      },
      radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
      center: ["55%", "55%"],
      label: {
        show: false,
      },
      data: [
        {
          value: 7.5, //底线
          itemStyle: {
            color: "rgba(3,31,62)",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          // hoverAnimation: false,
          emphasis: {
            scale: false
          }
        },
        {
          value: 2.5, //剩下1/4的透明区域
          itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          // hoverAnimation: false,用下面的替代
          emphasis: {
            scale: false
          }
        },
      ],
    });
  });
  console.log('ringbar series',series);
  return series;
};

const renderChart = () => {
  if (props.data.abnormals.length === 0) return;
  const options: EChartsOption = {
    // 图例配置 文字
    legend: {
      show: true,
      icon: "circle",
      top: '14%',
      left: '60%',
      data: props.data.abnormals.map((item) => item.name),
      width: -10, //以列展示
      itemWidth: 10,
      itemHeight: 8,
      itemGap: 6,
      textStyle: {
        // rich: {
        //   title: {
        //     fontSize: 12,
        //     color: "rgba(255,255,255,0.8 )",
        //     lineHeight: 5,
        //   },
        // },
        fontSize: 8,
        lineHeight: 6,
        color: "rgba(255,255,255,0.8 )",
      },
    },
    //提示层
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
    },
    //y轴
    yAxis: {
      type: "category",
      inverse: true,
      axisLine: {
        show: false,
      },
    },
    //x轴
    xAxis: {
      show: false,
    },
    //系列配置
    series: getSeriesData(),
  };
  //3 .最后通过 实例.set0ption 方法，设置配置对象
  mChart.setOption(options);
};

watch(() => props.data, renderChart);
</script>
<style scoped lang="scss"></style>
